from flask import Flask, render_template_string
import json
import sqlite3

app = Flask(__name__)

html_template = """
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>高德地图各公司地点展示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<!--加载高德-->
<script src="https://webapi.amap.com/loader.js"></script>
<script>
    //将 Python 处理后的数据传递给 JavaScript
    var list_jobs = {{ list_jobs|tojson }};
    console.log(list_jobs)
</script>
<script type="text/javascript">
    //设置高德地图的安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: "048317ed86620f203895b5ff4238b325",  //安全密钥
    };

    AMapLoader.load({
        key: "495cff9ea5a204fd8f893580f7f0ac01", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            //创建地图
            const map = new AMap.Map("container", {
                viewMode: '2D', //默认使用 2D 模式
                zoom: 12, //地图级别
                center: [113.260691, 22.979229], //地图中心点方唐鹅饭店
            });
            //创建海量标记点对象
            var massMarks = new AMap.MassMarks(list_jobs, {
                zIndex: 5, //海量点图层叠加的顺序
                zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
                 //设置标记点的样式
                style: {
                    url: "https://webapi.amap.com/images/mass/mass0.png", //红色点状图标的链接地址
                    size: new AMap.Size(11, 11), //图标大小
                    anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
                }
            });

            //将海量标记点添加到地图
            massMarks.setMap(map);

            //创建文本标记点，用于显示文本。并绑定地图对象
            var text_marker = new AMap.Marker({content: ' ', map: map});
            //给海量标记点对象绑定鼠标悬停事件
            massMarks.on('mouseover', function (e) {
                text_marker.setPosition(e.data.lnglat);
                text_marker.setLabel({content: e.data.jobName+"-"+e.data.brandName+"-"+e.data.cityName})
            });

            //创建方唐鹅标记点
            var a_marker = new AMap.Marker({
                map:map,
                position: [113.260691, 22.979229],
                anchor:'bottom-center',
                offset: new AMap.Pixel(0, 0),
                label:{
                    direction:'bottom',
                    offset: new AMap.Pixel(2, 0),  //设置文本标注偏移量
                    content: "<div class='info'>方唐鹅</div>", //设置文本标注内容
                }
            });

            //创建市头村(公交站)标记点
            var b_marker = new AMap.Marker({
                map:map,
                position: [113.394656,23.016231],
                anchor:'bottom-center',
                offset: new AMap.Pixel(0, 0),
                label:{
                    direction:'bottom',
                    offset: new AMap.Pixel(2, 0),  //设置文本标注偏移量
                    content: "<div class='info'>市头村(公交站)</div>", //设置文本标注内容
                }
            });

            //创建新造职中公交车站标记点
            var c_marker = new AMap.Marker({
                map:map,
                position: [113.431435,23.045053],
                anchor:'bottom-center',
                offset: new AMap.Pixel(0, 0),
                label:{
                    direction:'bottom',
                    offset: new AMap.Pixel(2, 0),  //设置文本标注偏移量
                    content: "<div class='info'>新造职中公交车站</div>", //设置文本标注内容
                }
            });

            //创建礼村公交车站标记点
            var d_marker = new AMap.Marker({
                map:map,
                position: [113.313729,23.015092],
                anchor:'bottom-center',
                offset: new AMap.Pixel(0, 0),
                label:{
                    direction:'bottom',
                    offset: new AMap.Pixel(2, 0),  //设置文本标注偏移量
                    content: "<div class='info'>礼村公交车站</div>", //设置文本标注内容
                }
            });

        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
</script>
"""

def get_jobs_from_db():
    conn = sqlite3.connect('../index/boss_job_data.db')  # 替换为实际的数据库文件名
    cursor = conn.cursor()
    # 查询所需字段，根据实际表结构调整
    cursor.execute('SELECT DISTINCT gps, jobName, brandName, cityName FROM t_job_info')
    rows = cursor.fetchall()
    jobs = []
    for row in rows:
        gps,jobName, brandName, cityName = row
        job = {
            "gps": gps,
            "jobName": jobName,
            "brandName": brandName,
            "cityName": cityName,
        }
        jobs.append(job)
    conn.close()
    return jobs

@app.route('/')
def index():
    jobs = get_jobs_from_db()
    list_jobs = []
    for item in jobs:
        # 将字符串中的单引号替换为双引号
        s = item["gps"]
        gps = s.replace("'", "\"")
        # 将 gps 字符串转换为字典
        GPS = json.loads(gps)
        a = {"lnglat": [GPS["longitude"], GPS["latitude"]], "jobName": item["jobName"], "brandName": item["brandName"], "cityName": item["cityName"]}
        list_jobs.append(a)
    return render_template_string(html_template, list_jobs=list_jobs)

if __name__ == '__main__':
    app.run(debug=True)